/**
 * 用户分析 管理初始化
 */
var VpnUserAnalyze = {
    regionTop10Series: [],
    regionPayUserSeries: [],
    regionTop10Names:[],
    regionYAxis:[],
    seriesData: [0,0,0,0,0],
    yAxis: ["Web","Mac","Windows","IOS","Android"],
    serverNameArray: ["节点"],
    serverSeries:[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],

    hourArray: [
        '00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'
        , '13','14', '15', '16', '17', '18', '19', '20', '21', '22', '23'
    ],

    platformNames: [],
    versionNames: [],
    versionCounts: null
};

/**
 * 注册用户IP分布列表
 */
VpnUserAnalyze.userIPList = function () {
    var ajax = new $ax(Feng.ctxPath + "/vpnUserAnalyze/userIPList", function (data) {
        VpnUserAnalyze.regionTop10Names = data.regionNames;
        VpnUserAnalyze.regionTop10Series = data.regionCounts;
        VpnUserAnalyze.regionPayUserSeries = data.payRegionCounts;

        VpnUserAnalyze.showRegionBar();

    }, function (data) {
        Feng.error("获取注册IP信息失败!"+ "!");
    });
    ajax.start();
};

/**
 * 展示地域，注册用户分布情况
 */
VpnUserAnalyze.showRegionBar = function(){
    var regionDom = document.getElementById("region");
    var regionEchart = echarts.init(regionDom);
    regionOption = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            data: ['总用户','付费用户']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: VpnUserAnalyze.regionTop10Names
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '总用户',
                type: 'bar',
                data: VpnUserAnalyze.regionTop10Series,
                label:{
                    formatter: '{b}\n{c}',
                    position: 'top',
                    show: true
                },
                itemStyle: {
                    color: 'purple',
                    shadowBlur: 10,
                    shadowColor: '#333'
                },
                barMaxWidth: 25
            },
            {
                name: '付费用户',
                type: 'bar',
                data: VpnUserAnalyze.regionPayUserSeries,
                label:{
                    formatter: '{b}\n{c}',
                    position: 'top',
                    show: true
                },
                itemStyle: {
                    color: 'blue',
                    shadowBlur: 10,
                    shadowColor: '#333'
                },
                barMaxWidth: 25
            }
        ]
    };
    if (regionOption && typeof regionOption === "object") {
        regionEchart.setOption(regionOption, true);
    }
};

/**
 * 各个版本分布情况
 */
VpnUserAnalyze.versionDistribution = function () {
    var ajax = new $ax(Feng.ctxPath + "/vpnUserAnalyze/versionDistribution", function (data) {
        VpnUserAnalyze.platformNames = data.platformNames;
        VpnUserAnalyze.versionNames = data.versionNames;
        VpnUserAnalyze.versionCounts = data.versionCounts;

        VpnUserAnalyze.showVersionDistributionBar();
    }, function (data) {
        Feng.error("获取版本信息失败!"+ "!");
    });
    ajax.start();
};

function getVersionSum(data){
    var ser = [];
    if (data != null){
        var len = data.length;
        for (var i = 0; i < len; i++) {
            ser[i]= {
                name: data[i].versionName,
                type: 'bar',
                stack: '总量',
                data: data[i].counts,
                label:{
                    show: true,
                    position: 'inside'
                },
                barWidth: 30
            };
        }
    }
    return ser;
}

/**
 * 展示版本分布信息
 */
VpnUserAnalyze.showVersionDistributionBar = function(){

    var dom = document.getElementById("platformVersion");
    var myChart = echarts.init(dom);
    option = null;
    option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        legend: {
            data: VpnUserAnalyze.versionNames
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value'
        },
        yAxis: {
            type: 'category',
            data: VpnUserAnalyze.platformNames
        },
        series: getVersionSum(VpnUserAnalyze.versionCounts)
    };

    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
};

/**
 * 获取平台注册用户信息
 */
VpnUserAnalyze.platformCount = function () {
    var ajax = new $ax(Feng.ctxPath + "/vpnUserAnalyze/platformCount", function (data) {
        if(data.yAxis.length > 0){
            VpnUserAnalyze.yAxis = data.yAxis;
            VpnUserAnalyze.seriesData = data.seriesData;
            VpnUserAnalyze.showPlatformBar();
        }
    }, function (data) {
        Feng.error("获取各个平台信息失败!"+ "!");
    });
    ajax.start();
};
/**
 * 展会 各个平台注册用户的数据信息
 */
VpnUserAnalyze.showPlatformBar = function(){
    var dom = document.getElementById("platform");
    var myChart = echarts.init(dom);
    option = null;
    option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            data: ['注册用户数']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01]
        },
        yAxis: {
            type: 'category',
            data: VpnUserAnalyze.yAxis

        },
        series: [
            {
                name: '注册用户数',
                type: 'bar',
                data: VpnUserAnalyze.seriesData,
                label:{
                    formatter: '{c}',
                    position: 'inside',
                    show: true
                },
                itemStyle: {
                    color: 'purple',
                    shadowBlur: 10,
                    shadowColor: '#333'
                },
                barWidth: 30
            }
        ]
    };

    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
};

/**
 * 查询获取用户付费率
 */
VpnUserAnalyze.getPaymentRatio = function(){
    const ajax = new $ax(Feng.ctxPath + "/vpnUserAnalyze/paymentRatio", function (data) {
        VpnUserAnalyze.showPaymentInfoBar(data.regCount,data.payCount);
    }, function (data) {
        Feng.error("获取各个平台信息失败!"+ "!");
    });
    ajax.start();
}

VpnUserAnalyze.showPaymentInfoBar = function(regCount,payCount){
    const dom = document.getElementById("paymentInfo");
    const myChart = echarts.init(dom);
    const option = {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        series: [
            {
                name: '付费率',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data: [
                    {value: regCount - payCount, name: '未付费用户'},
                    {value: payCount, name: '付费用户'}
                ],
                label:{
                    formatter:'{b}\n{c} ({d}%)',
                    position:'inside'
                },
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
}

/**
 * 获取VPN服务器节点的时段信息
 */
VpnUserAnalyze.serverConnectInfo = function () {
    var ajax = new $ax(Feng.ctxPath + "/vpnUserAnalyze/serverConnectInfo", function (data) {
        VpnUserAnalyze.serverNameArray = data.serverNameArray;
        var serverCountArray = data.serverCountArray;

        if(serverCountArray != null && serverCountArray.length > 0){
            var len = serverCountArray.length;
            var ser = [];
            for (var i = 0; i < len; i++) {
                ser[i]= {
                    name: serverCountArray[i].serverName,
                    type: 'line',
                    data: serverCountArray[i].countArray,
                    label:{
                        formatter: '{c}',
                        position: 'top',
                        show: true
                    }
                };
            }

            VpnUserAnalyze.serverSeries  = ser;
        }

        VpnUserAnalyze.showConnectCountBar();
    }, function (data) {
        Feng.error("获取VPN服务器连接信息失败!"+ "!");
    });
    ajax.start();
};


/**
 * 展示服务器节点的时段信息
 */
VpnUserAnalyze.showConnectCountBar = function(){
    var dom = document.getElementById("connect");
    var myChart = echarts.init(dom);
    option = null;
    option = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: VpnUserAnalyze.serverNameArray
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: VpnUserAnalyze.hourArray
        },
        yAxis: {
            type: 'value'
        },
        series: VpnUserAnalyze.serverSeries
    };

    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
};


$(function () {
    setTimeout(function () {
        VpnUserAnalyze.showRegionBar();
    });

    setTimeout(function () {
        VpnUserAnalyze.showPlatformBar();
        VpnUserAnalyze.showVersionDistributionBar();
    });

    setTimeout(function () {
        VpnUserAnalyze.showConnectCountBar();
    });

    setTimeout(function () {
        VpnUserAnalyze.userIPList();
    });

    setTimeout(function () {
        VpnUserAnalyze.versionDistribution();
    });

    setTimeout(function () {
        VpnUserAnalyze.platformCount();
    });


    setTimeout(function () {
        VpnUserAnalyze.getPaymentRatio();
    });


    setTimeout(function () {
        VpnUserAnalyze.serverConnectInfo();
    });
});
